<template>
	<view>
		<view class="page">
			<view class="order-container">
				<view v-for="(item, index) in completedOrders" :key="item.id" class="order-card">
					<view class="order-info" style="display: flex; align-items: center">
						<image v-if="index < imgList.length" class="order-image" :src="imgList[index]" mode="aspectFill" />
						<view class="order-details">
							<view class="row">
								<view>订单编号: {{ item.orderId }}</view>
								<view>产品价格: {{ item.orderPrice }}</view>
							</view>
							<view class="row">
								<view>产品名: {{ item.productName }}</view>
								<view>收货地址: {{ item.address }}</view>
							</view>
							<view class="row">
								<view>电话号码: {{ item.phone }}</view>
								<view>支付方式: {{ item.paymentMethod }}</view>
							</view>
							<view class="row">
								<view>支付时间: {{ formatDate(item.paidAt) }}</view>
								<view>完成时间: {{ formatDate(item.complishAt) }}</view>
							</view>
						</view>
					</view>
					<button class="button" @click="showCommentModal(item.productId, item.orderId)">评论</button>
				</view>
			</view>
			<view class="modal" v-if="modalShow">
				<view class="modal-content">
					<view class="rating-buttons">
						<!-- 评分按钮 -->
						<button
							class="rating-button"
							:class="{ active: selectedIndex === index }"
							@click="selectRating(index)"
							v-for="(rate, index) in ['好评', '中评', '差评']"
							:key="index"
						>
							{{ rate }}
						</button>
					</view>
					<view class="comment-input">
						<!-- 评论输入框 -->
						<input class="comment-input-field" type="text" placeholder="请输入评论内容" v-model="commentContent" />
						<button class="confirm-button" @click="submitComment">确定</button>
						<button class="confirm-button" @click="hideModal">取消</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			productId: null,
			orderId: null,
			modalShow: false,
			username: '',
			userId:null,
			completedOrders: [],
			imgList: [],
			commentContent: null,
			selectedIndex: -1
		};
	},
	onShow() {
		this.username = uni.getStorageSync('username');
		console.log(this.username);
		// this.fetchUserId();
		this.userId = uni.getStorageSync('userId');
		this.fetchCompletedOrders(); // 组件创建时获取订单数据
	},
	computed: {
		activeButtonIndex() {
			return this.selectedIndex;
		}
	},
	methods: {
		// 隐藏模态框的方法
		hideModal() {
			// 直接修改 data 对象的 modalShow 属性为 false
			this.modalShow = false;
		},
		fetchCompletedOrders() {
			console.log(this.userId);
			uni.request({
				url: `http://localhost:8080/order/finishOrders?userId=${this.userId}`,
				method: 'GET',
				success: (res) => {
					if (res.data.status === 200) {
						this.completedOrders = res.data.data;
						this.fetchProductImages(); // 新增方法，获取产品图片
						console.log(res.data.data);
					} else {
						console.log('没有已完成订单');
						this.completedOrders = [];
					}
				},
				fail: (err) => {
					console.error('获取订单失败', err);
				}
			});
		},
		fetchProductImages() {
			uni.request({
				url: `http://localhost:8080/order/showFinishOrdersImg?userId=${this.userId}`, // 替换为实际的后端API地址
				method: 'GET',
				success: (res) => {
					if (res.data.status === 200) {
						this.imgList = res.data.data;
						console.log(res.data.data);
					} else {
						console.error('获取订单失败', err);
					}
				},
				fail: (err) => {
					console.error('获取信息失败', err);
				}
			});
		},
		showCommentModal(productId, orderId) {
			// 评论的订单信息
			this.productId = productId;
			this.orderId = orderId;
			this.modalShow = true;
		},
		selectRating(index) {
			this.selectedIndex = index; // 设置选中的评级索引
		},
		submitComment() {
			if (!this.commentContent.trim()) {
				uni.showToast({
					title: '评论内容不能为空',
					icon: 'none'
				});
				return;
			}
			const rating = ['好评', '中评', '差评'][this.selectedIndex]; // 根据索引获取评级
			const commentData = {
				username: this.username,
				productId: this.productId,
				content: this.commentContent.trim(),
				remark: rating,
				orderId: this.orderId
			};
			const commentDataJson = JSON.stringify(commentData);
			console.log('提交的评论数据:', commentDataJson);
			uni.request({
				url: `http://localhost:8080/review/addreview`, // 替换为实际的后端API地址
				data: commentDataJson,
				method: 'POST',
				success: (res) => {
					if (res.data.status === 200) {
						uni.showToast({
							title: '评论成功',
							icon: 'none'
						});
					} else {
						console.error('评论失败', err);
					}
				},
				fail: (err) => {
					console.error('评论失败', err);
				}
			});
			this.hideModal(); // 提交后隐藏弹窗
		},
		formatDate(date) {
			const dateObj = new Date(date);
			const year = dateObj.getFullYear();
			const month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
			const day = dateObj.getDate().toString().padStart(2, '0');
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style>
.row {
	display: flex;
	flex-wrap: wrap; /* 允许换行 */
	justify-content: space-between; /* 水平排列，元素之间空间平均分布 */
}
.page {
	background-color: #eceaea;
}
.order-container {
	width: 100%;
	flex-wrap: wrap;
	padding: 10px;
}
.order-info{
	margin-bottom: 0rpx;
}
.order-card {
	width: 95%; /* 根据需要调整，使每行显示两个订单卡片 */
	margin-bottom: 20px;
	background-color: #fff; /* 卡片背景色 */
	border-radius: 8px; /* 圆角边框 */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); /* 阴影效果 */
	overflow: hidden; /* 隐藏溢出内容 */
}

.order-image {
	width: 100px; /* 图片宽度 */
	height: 100px; /* 图片高度 */
	margin-left: 10px; /* 图片与订单信息之间的间距 */
}

.order-details {
	padding: 10px; /* 内边距 */
	
}
.button {
	background-color: rgb(252, 252, 255);
	width: 20%; /* 按钮宽度 */
	padding: 0px; /* 按钮内边距 */
	font-size: 12px; /* 按钮文字大小 */
	color: #f3841c;
	display: inline-flex; /* 使用 inline-flex 将按钮转换为内联的 Flex 容器 */
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	margin-left: 300px;
	margin-top: 0px; /* 按钮与订单信息的间距 */
	margin-bottom: 10px;
	border: 1px solid rgb(250, 153, 7);
	border-radius: 20px;
}

/* 模态框样式 */
.modal {
	width: 100%;
	height: 500rpx;
	position: fixed;
	left: 0;
	top: 500rpx;
	right: 0;
	bottom: 0;
	/* 半透明背景 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
/* 模态框内容样式 */
.modal-content {
	background-color: #ffffff;
	border-radius: 25px;
	width: 80%;
	max-width: 500px;
	/* 最大宽度 */
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 1);
	/* 添加阴影 */
	position: relative;
}
/* 评分按钮样式 */
.rating-buttons {
	display: flex; /* 使按钮水平排列 */
	justify-content: center; /* 居中排列按钮 */
	margin-bottom: 10px; /* 底部外边距 */
}

.rating-button {
	padding: 5px 20px; /* 内边距 */
	margin: 0 5px; /* 外边距，避免按钮之间粘连 */
	border: 1px solid grey; /* 无边框 */
	background-color: #f0f0f0; /* 灰色背景 */
	color: #333; /* 文字颜色 */
	border-radius: 20px; /* 圆角边框 */
	cursor: pointer; /* 鼠标悬停时显示指针手势 */
	outline: none; /* 点击时不显示轮廓 */
	transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
	margin-bottom: 10px;
}

.rating-button:hover {
	background-color: #e0e0e0; /* 鼠标悬停时的背景颜色 */
}

.rating-button.active {
	background-color: #007bff; /* 选中时的背景颜色 */
	color: white; /* 文字颜色 */
}

/* 评论输入框样式 */
.comment-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.comment-input-field {
	flex: 1; /* 填充剩余空间 */
	padding: 10px; /* 内边距 */
	border: 1px solid #ddd; /* 边框 */
	border-radius: 5px; /* 圆角边框 */
	outline: none; /* 点击时不显示轮廓 */
	margin-right: 10px; /* 右边距 */
}

.confirm-button {
	padding: 0px 20px;
	background-color: #28a745; /* 绿色背景 */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	margin-left: 15rpx;
}

.confirm-button:hover {
	background-color: #218838;
}
</style>
